<!--    表格-->
<template>
  <div class="table_box">
    <el-table
      :data="listDate"
      :header-cell-style="{
        background: 'rgba(227,189,189,0.53)',
        border: 'none',
        color: '#000',
      }"
      border
      style="width: 100%"
    >
      <el-table-column label="ID" prop="addressId" width="80">
      </el-table-column>
      <el-table-column label="用户名" prop="userName" width="160">
      </el-table-column>
      <el-table-column label="收货人" prop="consignee" width="120">
      </el-table-column>
      <el-table-column label="联系方式" width="110">
        <template slot-scope="scope">
          <span class="blue_text">{{ scope.row.contact }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货地址" prop="address" width="220">
      </el-table-column>
      <el-table-column label="关联仓库" prop="warehouse" width="160">
      </el-table-column>
      <el-table-column label="绑定配送员" prop="courier" width="180">
      </el-table-column>
      <el-table-column label="默认数" prop="defaultNumber" width="110">
      </el-table-column>
      <el-table-column label="是否默认" prop="isDefault" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.isDefault ? "是" : "否" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" width="110">
        <template slot-scope="scope">
          <span :class="scope.row.status ? 'green_text' : 'orange_text'">{{
            scope.row.status ? "已审核" : "待审核"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" prop="updateTime" sortable width="160">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <div>
            <span class="blue_text operation_btn">详情</span>
            <span class="blue_text operation_btn">修改</span>
            <span class="orange_text operation_btn">审核</span>
            <span
              class="red_text operation_btn"
              @click="deleteAddress(scope.row.addressId)"
              >删除</span
            >
          </div>
          <div>
            <span class="blue_text operation_btn">关联仓库</span>
            <span class="blue_text operation_btn">绑定配送员</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ["listDate"],
  methods: {
    deleteAddress(addressId) {
      this.$emit("listenChildrenEvent", addressId);
    },
  },
};
</script>

<style scoped>
.table_box {
  margin-top: 20px;
}

.product_img {
  margin-top: 7px;
  width: 40px;
  height: 40px;
}

/*解决element表格固定列的下边框*/
/deep/ .el-table__fixed-right::before,
/deep/ .el-table__fixed::before {
  height: 0 !important;
  z-index: 0 !important;
}
</style>
